<template>
    <up-popup
        :show="modelValue"
        @close="emit('update:modelValue', false)"
        :closeable="true"
        round="30rpx"
        :z-index="900"
    >
        <view class="pl-30 pr-30 pb-40">
            <view class="ft-32 bold t-3 pt-26 center mb-20">选择退房日期</view>
            <view class="header mb-20 pb-24 pt-10">
                <view class="mb-20 t-9">原订单入离日期</view>
                <view class="space-between t-3">
                    <view
                        >{{ getTime(timeRange.checkInDate) }} -
                        {{ getTime(timeRange.checkOutDate) }}</view
                    >
                    <view>{{ getNightCount }}晚</view>
                </view>
            </view>
            <view class="ft-32">
                <view class="mb-8 ft-30 bold">选择新的退房日期</view>
                <scroll-view class="main" :scroll-y="true">
                    <view
                        v-for="item in dateOptions"
                        :key="item.id"
                        class="align-center pt-16 pb-16 space-between"
                        @click="dateValue = item.id"
                    >
                        <view class="flex-auto">{{ getTime(item.time) }}</view>
                        <hj-image
                            :isLoad="false"
                            :src="dateValue === item.id ? 'radio-02.png' : 'radio-01.png'"
                            height="36rpx"
                            width="36rpx"
                            mode="aspectFit"
                        />
                    </view>
                </scroll-view>
            </view>
            <view class="center ft-32 but t-w br-44 mt-30" @click="submit">确定</view>
            <!-- 底部安全区域 -->
            <hj-safe-footer />
        </view>
    </up-popup>
</template>

<script setup>
/**
 * @description 选择弹窗
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, watch, computed } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'DatePopup'
})
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    timeRange: {
        type: Object,
        default: () => ({
            checkInDate: '',
            checkOutDate: ''
        })
    }
})

// 选中的取消日期
const dateValue = ref('')

// 取消原因选项
const dateOptions = ref([])

// 监听timeRange值的变化
watch(
    () => [props.timeRange.checkInDate, props.timeRange.checkOutDate],
    ([newCheckInDate, newCheckOutDate]) => {
        if (newCheckInDate && newCheckOutDate) {
            dateOptions.value = []
            let start = dayjs(newCheckInDate).add(1, 'day')
            let end = dayjs(newCheckOutDate)
            while (start.isBefore(end)) {
                dateOptions.value.push({
                    id: dateOptions.value.length + 1,
                    time: start.format('YYYY-MM-DD')
                })
                start = start.add(1, 'day')
            }
        }
    },
    {
        immediate: true,
        deep: true // 添加深度监听
    }
)
// 计算出timeRange中两个日期有几晚
const getNightCount = computed(() => {
    if (props.timeRange.checkInDate && props.timeRange.checkOutDate) {
        return dayjs(props.timeRange.checkOutDate).diff(dayjs(props.timeRange.checkInDate), 'day')
    }
    return 0
})

const emit = defineEmits(['update:modelValue', 'submit'])

// 确认取消
const submit = () => {
    emit('update:modelValue', false)
    const text = dateOptions.value.find(item => item.id === dateValue.value).time
    emit('submit', text)
}

// 时间格式处理
const getTime = time => {
    if (!time) {
        return ''
    }
    const weekList = ['日', '一', '二', '三', '四', '五', '六']
    return dayjs(time).format('MM月DD日') + '(周' + weekList[dayjs(time).day()] + ')'
}
</script>

<style scoped lang="scss">
.header {
    border-bottom: 1rpx solid $uni-bg-color-hover;
}
.main {
    max-height: 560rpx;
}
.but {
    height: 88rpx;
    background: $uni-color-primary;
}
</style>
